<template>
  <div class="wrap">
    <div class="container">
      <TopBreadCrumb></TopBreadCrumb>
      <div class="user_center_content">
        <!-- 左侧菜单 -->
        <LeftNavMenu></LeftNavMenu>
        <!-- 左侧菜单结束 -->
        <!-- 右侧内容开始  -->
        <div class="right_user_content">
          <div class="select_nav_title">
            <div class="title">{{title}}</div>
            <div class="order_search">
              <input type="text" placeholder="输入商品标题或订单号进行搜索" />
              <el-button icon="el-icon-search" circle></el-button>
            </div>
          </div>
          <div class="order_content" id="ddorder">
            <div class="order_list" v-for="(order,index) in data.data" :key="index">
              <div class="order_top">
                <div class="order_desc">
                  <div class="label">常规</div>
                  <div>订单号：{{order.order_sn}}</div>
                  <div>订单生成时间：{{order.create_time}}</div>
                </div>
                <div>订单状态：
                  <span v-if="order.state == 0">待审核</span>
                  <span v-else-if="order.state == 1 && order.status == 0">待支付</span>
                  <span v-else-if="order.status == 1">已支付</span>
                </div>
              </div>
              <div class="order_info">
                <div class="order_goods_content">
                  <div class="order_goods_list" v-for="(goods,goodsIndex) in order.item" :key="goodsIndex">
                    <div class="order_goods_info">
                      <div class="order_goods_img">
                        <img :src="$commonImageUrl(goods.goods_image)" />
                      </div>
                      <div class="goods_spec_info">
                        <div class="goods_name">{{goods.goods_title}}</div>
                        <div>型号：{{goods.goods_sku_name}}</div>
                        <div>规格：{{goods.goods_sku_text}}</div>
                        <div>备注：{{goods.goods_remark}}</div>
                      </div>
                    </div>
                    <div class="company_name">
                      {{goods.factory_name}}
                    </div>
                    <div class="goods_price">￥{{goods.goods_price}}</div>
                    <div class="car_num_operate">{{goods.goods_num}}</div>
                  </div>
                    <div class="mark" v-if="markRemark">
                        备注：公司内部使用，请将产品使用独立打包方式寄出。
                    </div>
                </div>
                <div class="list_count_price">
                  <div>￥{{order.total_amount}}</div>
                  <div class="express_price">(含运费￥{{order.dispatch_amount}})</div>
                </div>
                <div class="operate_delete">
                  <div class="now_pay" @click="openReceiptDialog" v-if="order.state == 0">提醒审核</div>
                  <div class="now_pay" @click="openReceiptDialog" v-if="order.state == 1 && order.status == 0">立即付款</div>
                  <div class="operate_more">
                    <div class="more">
                      更多<span class="el-icon-caret-right"></span>
                    </div>
                    <ul class="gdxx">
                      <li><nuxt-link  :to="path + 'Show/' + order.id">订单详情</nuxt-link></li>
                      <li v-if="cancelOrderBtn"><a href="#">取消订单</a></li>
                      <li><a href="#">联系客服</a></li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>            
          </div>
          <Custom-pagination :total="data.total" :page.sync="query.page" :pageSize.sync="query.pageSize" @pagination="LoadDataList" :hidden="pageHidden"></Custom-pagination>
        </div>
      <!-- 右侧内容结束 -->
      </div>
    </div>
    <el-dialog
        title="上传付款回执"
        :visible.sync="dialogReceiptVisible"
        width="35%"
        :close-on-click-modal="false"
        top="2%">
        <div class="dialog-content payment-receipt">
            <div class="title">企业信息</div>
            <div class="item">
                <p><span>账号名称</span>北京鑫康辰医学科技发展有限公司</p>
                <p><span>开户银行</span>中国农业银行北京经济技术开发区支行</p>
                <p><span>银行账号</span>11221201040008406</p>
            </div>
            <div class="title">订单信息</div>
            <div class="item">
                <p><span>订单详情</span>同种异体肌腿 x10EH复合材料(颅领优) x10</p>
                <p><span>订单号</span>220109193821-OTUK-1-0114674</p>
                <p><span>订单时间</span>2022-03-1515:29:02</p>
                <p><span>订单总额</span>￥5700.00</p>
            </div>
            <div class="title">支付信息</div>
            <el-form ref="form" :model="form" label-width="150px" label-position="left">
                <el-form-item label="使用余额支付">
                    <el-input v-model="form.balance" placeholder=""></el-input>
                    <span class="el-icon-warning text-grey"></span> <span class="text-grey">账户剩余余额: ￥4150.00</span>
                </el-form-item>
                <el-form-item label="还需付款金额">
                    <el-input v-model="form.name" placeholder="￥5700.00"></el-input>
                </el-form-item>
                <el-form-item label="上传付款回执">
                    <CustomImageUpload v-model="form.remaining"></CustomImageUpload>
                    <span class="text-grey">支持pdf、jpg、png格式文件大小不超过5MB</span>
                </el-form-item>
                <el-form-item>
                    <el-button class="btn-main" @click="onSubmit">提交</el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import $ from "jquery";
import api from "@/api/order"
export default {
  name: "OrderList",
  props: {
    //标题
    title: {
      type: String,
      default:"全部订单",
    },
    //状态
    status: {
      type: String,
      default:"all",
    },
    //订单备注
    markRemark: {
      type: Boolean,
      default:false
    },
    //取消订单
    cancelOrderBtn: {
      type: Boolean,
      default:false
    },
    toShow: {
      type: String,
      default:"",
    }
  },
  data() {
    return {
      data: {
          data: [],
          total: 0
      },
      query: {
          page: 1,
          pageSize: 4,
          type: "all"
      },
      pageHidden: true,
      path: "",
      // 回执单弹框状态
      dialogReceiptVisible: false,
      form: {}
    };
  },
  methods: {
    openReceiptDialog: function () {
      this.dialogReceiptVisible = true;

    },
    // 提交回执单
    onSubmit: function () {
      
    },
    // 获取列表数据
    LoadDataList() {
      this.query.type = this.status;
      api.GetOrderPageList(this.query)
          .then((res) => {
              this.data = res.data;
              console.log("data",this.data)
              this.pageHidden = false;
              if (this.query.pageSize >= this.data.total) {
                  this.pageHidden = true;
              }
              this.$nextTick(() => {
              this.DataNextJs();
              });
          })
    },
    SubmitOrderShow(value) { 
      this.$emit('orderShow',value)
    },
    DataNextJs() { 
      $("#ddorder .operate_more").click(function () {
          if ($(this).parents(".operate_delete").hasClass("on")) {
            $(this).next(".operate_more .gdxx").slideUp();
            $(this).parents(".operate_delete").removeClass("on");
          } else {
            $("#ddorder .operate_more .gdxx").slideUp();
            $(this).next(".operate_more .gdxx").slideDown();
            $("#ddorder .operate_more").removeClass("on");
            $(this).parents(".operate_delete").addClass("on");
          }
      });
    }
  },
  mounted: function () {
    console.log("path",this.$route.path)
    this.path = this.$route.path; //获取地址栏
    this.LoadDataList();
  },
};
</script>
<style></style>
